<template>
  <div class="orderdet">
    <div class="stus">
      <img src="../../assets/image/cards.png"
           width="30">
      <span> {{room.status | orderStuts}}</span><span v-show="room.status ===  '1'"> {{minute}}分{{second}}秒</span>
    </div>
    <div class="
           room
           bg_fff">
      <div class="tit pd20 bor_b fz28">
        <img src="../../assets/image/shop.png"
             width="20">
        {{room.hotelName}}
      </div>
      <div class="con">
        <div class="flex between info pd20">
          <img :src="room.roomFile | imgUrl"
               class="bora_10 mr20"
               width="60"
               height="60">
          <div class="room_ifo">
            <p class="fz28 flex between"><span>{{room.roomCategory}}</span> <span class="fz20"><span class="fz20">￥{{room.orderAmount}}</span></span></p>
            <p class="col_999">{{room.startTime}}~{{room.endTime}}</p>
            <p class="col_999">{{room.days}}晚</p>
          </div>
        </div>
      </div>
    </div>
    <p class="flex pd20 between bg_fff mtb20 bor_t col_bbb">
      <span>订单金额</span>
      <span>￥ {{room.orderAmount}}</span>
    </p>
    <div class="infos">
      <div>
        <span>订单编号</span>
        <span> {{room.orderNo}}</span>
      </div>
      <div>
        <span>下单时间</span>
        <span>{{room.bookedByTime}}</span>
      </div>

      <div class="bor_t">
        <span>联系人</span>
        <span>{{room.checkInName}}</span>
      </div>
      <div>
        <span>手机号</span>
        <span>{{room.checkInMobile}}</span>
      </div>
      <div>
        <span>备注</span>
        <span>{{room.remark}}</span>
      </div>
    </div>
    <div class="infos"
         v-show="room.payMethod ==='0'">
      <div>
        <span>会员卡卡号</span>
        <span> {{room.cardNumber}}</span>
      </div>
      <div>
        <span>本次消耗</span>
        <span>{{room.days}}次</span>
      </div>
    </div>
    <div class="fixbtn flex "
         @click="pay"
         v-show="room.status ===  '1'">
      <p><span class="mr20"> ￥ {{room.orderAmount}}元</span> 立即支付</p>
    </div>
  </div>
</template>
<script>
import * as API from '../../api'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      room: '', user: '', bookedTime: '', seconds: '', minutes: ''
    }
  },
  created () {
    console.log(this.userInfo);
    this.$http.get(API.orderDetail, {
      params: {
        orderId: this.$route.query.orderId
      }    }).then(res => {
      this.room = res.data
      this.bookedTime = this.room.bookedTime
      this.countDown()
    }).catch(err => {
      console.log(err)
    })
  },

  methods: {
    num:
      val => {
        return val < 10 ? '0' + val : '' + val
      },
    pay () {
      this.$router.push({ path: '/pay', query: { orderId: this.$route.query.orderId, orderTotal: this.room.orderAmount, days: this.room.days } })
    },
    countDown () {
      //下单时间
      this.bookedTime = this.bookedTime.replace(/-/g, '/');
      this.bookedTime = new Date(this.bookedTime);
      this.bookedTime = this.bookedTime.getTime()
      //现在时间
      let now = new Date().getTime()
      let countDownTime = now - this.bookedTime
      let deadTime = 600000
      countDownTime = deadTime - countDownTime
      if (countDownTime < 0) return
      let count = this.getMS(countDownTime)
    },
    getMS (time) {
      this.minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60))
      this.seconds = parseInt((time % (1000 * 60)) / 1000)
      this.timer()
    },
    timer () {
      var _this = this
      var time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0
          window.clearInterval(time)
        } else {
          _this.seconds -= 1
        }
      }, 1000)
    }
    // }
  },
  computed: {
    ...mapGetters(['userInfo']),
    second: function () {
      return this.num(this.seconds)
    },
    minute: function () {
      return this.num(this.minutes)
    }
  },
  watch: {
    second: {
      handler (newVal) {
        this.num(newVal)
      }
    },
    minute: {
      handler (newVal) {
        this.num(newVal)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.stus {
  background: url("../../assets/image/stus.png") no-repeat 0/100%;
  width: 100%;
  height: 130px;
  line-height: 130px;
  padding-left: 50px;
  box-sizing: border-box;
  font-size: 30px;
  color: #fff;
  img {
    margin-right: 30px;
    color: #fff;
  }
}
.room {
  @extend .bg_fff;
  .con {
    padding: 20px;
    .info {
      .room_ifo {
        width: 80%;
      }
    }
  }
}
.infos {
  @extend .bor_t;
  @extend .col_999;
  @extend .mtb20;
  @extend .bg_fff;
  padding: 20px 40px;
  div {
    line-height: 60px;
    @extend .flex;
    @extend .start;
    span:first-child {
      display: block;
      width: 21%;
      color: #000;
      margin-right: 30px;
      text-align: right;
    }
  }
}
</style>
